import React, { useEffect, useState } from 'react';
import { Modal, Input, message } from 'antd';

let LOCATION_MAP_ID = 'LOCATION_MAP_ID';
function LoacationSelect(props) {
    const { locationVisible } = props;
    const [lnglat, setLnglat] = useState()
    const [location, setLocation] = useState()

    useEffect(() => {
        setTimeout(() => {
            if (locationVisible && document.getElementById(LOCATION_MAP_ID)) {
                const locationMap = new AMap.Map(LOCATION_MAP_ID, {
                    // center: [116.054664, 28.538966],
                    zoomEnable: true,
                    dragEnable: true,
                    cursor: 'pointer',
                });

                locationMap.on('click', (e) => {
                    locationMap.clearMap();
                    const marker = new AMap.Marker({
                        icon: '/assets/images/homepage/fire/position.png',
                        position: e.lnglat,
                        offset: new AMap.Pixel(-5, -15)
                    });
                    marker.setMap(locationMap);
                    setLnglat(e.lnglat.lng + ',' + e.lnglat.lat)
                })
            }
        }, 200);
    }, [locationVisible])

    const renderLocationInfowindow = () => {
        return <div className='location_infowindow'>
            <div className='gis_exit' onClick={() => { props.onCancel() }} />

            <div className='info_div'>
                <span className='location_title'>经纬度:</span>
                <span>{lnglat}</span>
            </div>
            <div className='info_div'>
                <span className='location_title'>坐标点位置:</span>
                <Input style={{ width: '70%' }} value={location} onChange={(e) => { setLocation(e.target.value) }} />
            </div>
            <div id={LOCATION_MAP_ID} className='location_map'></div>

            <div className='location_btn_container'>
                <div className='reset_btn' onClick={() => {
                    setLnglat(null)
                    setLocation(null)
                }}>
                    重置点位
                </div>
                <div
                    onClick={() => {
                        if (!lnglat) {
                            message.warning('请在地图上选择经纬度点位')
                            return;
                        }
                        if (!location) {
                            message.warning('请填写坐标点位置')
                            return;
                        }
                        props.locationSelect({ lnglat, location })
                        // setTimeout(() => {
                        //     setLnglat(null)
                        //     setLocation(null)
                        // }, 200);
                    }}
                    className='ok_btn'>
                    确认选择
                </div>
            </div>
        </div>
    }


    return <Modal
        maskClosable={false}
        wrapClassName="custom-modal"
        visible={locationVisible}
        closable={false}
        width="569px"
        centered
        footer={null}
        bodyStyle={{}}
        destroyOnClose
    >
        {renderLocationInfowindow()}
    </Modal>

}

export default LoacationSelect;